<!--  -->
<template>
  <div id="good-item" @click="handleDetails()">
    <div class="img-warp">
      <img :src="item.show.img" alt="" @load="imgLoad" />
    </div>
    <div class="good-info">
      <div class="title">
        {{ item.title }}
      </div>
      <div class="goods-tag-warp">
        <div class="price">{{ item.price }}</div>
        <div class="collect">{{ item.cfav }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {
    imgLoad() {
      this.$bus.$emit("goodimgLoad");
    },
    //跳转详情页
    handleDetails() {
      console.log(1);
      this.$router.push("/details/"+ this.item.iid);
    },
  },
  created() {},
  mounted() {},
  updated() {},
};
</script>
<style lang="less" scoped>
//@import url();
.img-warp {
  width: 100%;
  img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
  }
}
.good-info {
  position: absolute;
  bottom: 10px;
  width: 100%;
  font-size: 14px;
  margin-top: 10px;
  .title {
    margin-bottom: 5px;
    width: 98%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .goods-tag-warp {
    display: flex;
    div {
      flex: 1;
      text-align: center;
    }
    .price {
      color: palevioletred;
    }
  }
}
</style>
